import React, { useEffect, useState } from 'react';
import { Button } from 'antd';
import { SettingOutlined } from '@ant-design/icons';
import FrozenMachBoard from './FrozenMachBoard';
// import OtherMachBoard from './OtherMachBoard';
import ParamsBoard from './ParamsBoard';
import ParamsSetting from './ParamsSetting';
import style from '@/pages/IndexPage.css';

function CommonBoard({ info }){
    const [boardType, setBoardType] = useState('eff');
    const [visible, setVisible] = useState(false);
    return (
        <div style={{ width:'56%', height:'100%', padding:'1rem'  }}>
            <div style={{ height:'40px', display:'flex', justifyContent:'space-between' }}>
                <div className={style['radio-container']}>
                    <div className={style['radio-item'] + ' ' + ( boardType === 'eff' ? style['selected'] : '')} onClick={()=>setBoardType('eff')}>能效看板</div>
                    <div className={style['radio-item'] + ' ' + ( boardType === 'params' ? style['selected'] : '')} onClick={()=>setBoardType('params')}>参数看板</div>
                </div>
                <Button type='primary' icon={<SettingOutlined />} onClick={()=>setVisible(true)}>参数设置</Button>
            </div>
            <div style={{ height:'calc( 100% - 40px)' }}>
                {
                    boardType === 'eff'
                    ?
                    <FrozenMachBoard />
                    :
                    <ParamsBoard />
                }
            </div>
            {/* 设备参数设置组件 */}
            <ParamsSetting visible={visible} info={info} onClose={()=>setVisible(false)} />
        </div>
    )
}

export default CommonBoard;